import React, { PureComponent } from 'react'
import './comment.scss'

//antd
import { message } from 'antd'

// redux
import { connect } from 'react-redux'
import { login, logout } from '../../store/actions/userinfo'
import { getComments, setComment } from '../../store/actions/comments'
import { UserInfo } from '../../types'

import Form from '../../component/form'

interface Props {
  comments: any
  userinfo: UserInfo
  login: Function
  logout: Function
  getComments: Function
  setComment: Function
}

interface State {
  size: number
}

// @ts-ignore
@connect((state) => state, {
  login,
  logout,
  getComments,
  setComment,
})
class Comment extends PureComponent<Props, State> {
  state: State = {
    size: 5,
  }

  componentDidMount() {
    console.log(this.props)
  }

  // redux save userinfo
  login = (userinfo: any) => {
    this.props.login(userinfo)
  }

  // redux 清除 userinfo
  logout = () => {
    this.props.logout()
  }

  render() {
    message.config({
      top: 80,
      duration: 2,
      maxCount: 3,
    })

    const { userinfo } = this.props

    const { login, logout } = this

    return (
      <div id="comment">
        <div className="header" title="留言">
          <div className="center">
            <h1>留言</h1>
            <span>- Messages -</span>
          </div>

          <svg
            className="wave-svg"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 1440 260"
          >
            <path
              id="page-header-svg-path"
              fillOpacity="1"
              d="M0,256L60,245.3C120,235,240,213,360,218.7C480,224,600,256,720,245.3C840,235,960,181,1080,176C1200,171,1320,213,1380,234.7L1440,256L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"
            ></path>
          </svg>
        </div>
        <div className="content">
          <article className="post">
            <div className="words">
              <h3>
                时间是让人猝不及防的东西，晴时有风阴有时雨。争不过朝夕，又念着往昔。
              </h3>
              <h3> 如果您有话想对我说，那就写在下面吧!</h3>
              <h3>
                {' '}
                请遵守相关法律法规，文明灌水，谢谢合作~
                {/* <img
                  title="盖牌认输永远不在选择之列 : CAYDE-6"
                  src="https://cdn.jsdelivr.net/gh/Redloney/CDN@1.2/static/gif/CAYDE-6.png"
                  alt="CAYDE-6"
                /> */}
              </h3>
            </div>
          </article>
          <Form login={login} logout={logout} userinfo={userinfo} />
        </div>
      </div>
    )
  }
}

export default Comment
